<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html class=" js csstransforms3d"><head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>相册管理－内容</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/page.css">
	<!--[if lte IE 8]>
	<link href="css/ie8.css" rel="stylesheet" type="text/css"/>
	<![endif]-->
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body style="background: #f6f5fa;">

	<!--content S-->
	<div class="super-content RightMain" id="RightMain">
		
		<!--header-->
		<div class="superCtab">
			
			<div class="ctab-title clearfix">
				<h3>相册管理</h3>
				<div class="xc-backlist"><a href="xiangce_Guanli.html" class="backlistBtn"><i class="ico-back"></i>返回列表</a></div>
			</div>
			
			<div class="ctab-Main">				
				<div class="ctab-Mian-cont">
					<div class="xc-btn-bar">
						<h3>相册名称：公司2015年底聚餐活动相册</h3>
						<div class="xc-download-bar"><input id="fileImage" class="downloadfile" type="file" size="10" name="fileselect[]" multiple=""><a href="javascript:;" class="downloadImgBtn"><i class="ico-download"></i>上传图片</a></div>
					</div>
					
					<div class="xc-all-box clearfix">
						<div class="subxc-list setfm">
							<div class="img"><img src="images/img_xc.jpg"><div class="bg" style="display: none;"><a href="javascript:;" class="adelete-a">删除</a></div></div>
							<p>活动照片1</p>
							<div class="xc-opr clearfix">
								<a href="#" class="xc-fm-a">设为封面</a>
								<a href="#" class="xc-xiugai-a">修改</a>
							</div>
						</div>
						<div class="subxc-list">
							<div class="img"><img src="images/img_xc.jpg"><div class="bg" style="display: none;"><a href="javascript:;" class="adelete-a">删除</a></div></div>
							<p>活动照片1</p>
							<div class="xc-opr clearfix">
								<a href="#" class="xc-fm-a">设为封面</a>
								<a href="#" class="xc-xiugai-a">修改</a>
							</div>
						</div>
						<div class="subxc-list">
							<div class="img"><img src="images/img_xc.jpg"><div class="bg"><a href="javascript:;" class="adelete-a">删除</a></div></div>
							<p>活动照片1</p>
							<div class="xc-opr clearfix">
								<a href="#" class="xc-fm-a">设为封面</a>
								<a href="#" class="xc-xiugai-a">修改</a>
							</div>
						</div>
						<div class="subxc-list">
							<div class="img"><img src="images/img_xc.jpg"><div class="bg"><a href="javascript:;" class="adelete-a">删除</a></div></div>
							<p>活动照片1</p>
							<div class="xc-opr clearfix">
								<a href="#" class="xc-fm-a">设为封面</a>
								<a href="#" class="xc-xiugai-a">修改</a>
							</div>
						</div>
						<div id="preview"></div>
					</div>
					<!--pages S-->
					<div class="pageSelect">
						<div class="pageWrap">
							<a class="pagePre"><i class="ico-pre">&nbsp;</i></a>
							<a href="#" class="pagenumb cur">1</a>
							<a href="#" class="pagenumb">2</a>
							<a href="#" class="pagenumb">3</a>
							<a href="#" class="pagenext"><i class="ico-next">&nbsp;</i></a>
						</div>
					</div>
					<!--pages E-->
				</div>
			</div>
		</div>
		<!--main-->
	</div>
	<!--content E-->
	
	<div class="layuiBg"></div><!--公共遮罩-->
	<!-- 修改弹出层-->
	<div class="addXcBox xcXgBox layuiBox">
		<div class="layer-title clearfix"><h2>修改相册</h2><span class="layerClose"></span></div>
		<div class="layer-content">
			<div class="aFllink clearfix"><span>相册名称</span></div>
			<div class="aFllink clearfix"><input type="text" value="活动照片1"></div>
			<div class="aFlBtn"><input type="button" value="保存" class="saveBtn"></div>
		</div>
	</div>
	

<script type="text/javascript" src="js/zxxFile.js"></script>
<script>
var params = {
	fileInput: $("#fileImage").get(0),
	upButton: $("#fileSubmit").get(0),
	url: $("#uploadForm").attr("action"),
	filter: function(files) {
		var arrFiles = [];
		for (var i = 0, file; file = files[i]; i++) {
			if (file.type.indexOf("image") == 0) {
				if (file.size >= 512000) {
					alert('您这张"'+ file.name +'"图片大小过大，应小于500k');	
				} else {
					arrFiles.push(file);	
				}			
			} else {
				alert('文件"' + file.name + '"不是图片。');	
			}
		}
		return arrFiles;
	},
	onSelect: function(files) {
		var html = '', i = 0;
		$("#preview").html('<div class="upload_loading"></div>');
		var funAppendImage = function() {
			file = files[i];
			if (file) {
				var reader = new FileReader()
				reader.onload = function(e) {
					html = html +'<div class="subxc-list"><div class="img"><img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image"/><div class="bg"><a href="javascript:;" class="adelete-a" data-index="'+ i +'">删除</a></div></div>' +
						'<p>'+ file.name +'</p>'+ 
						'<div class="xc-opr clearfix"><a href="javascript:;" class="xc-fm-a">设为封面</a><a href="javascript:;" class="xc-xiugai-a">修改</a></div>'+
					'</div>';
					
					i++;
					funAppendImage();
					$('.subxc-list').hover(function(){
			    		$(this).children('.img').find('.bg').fadeIn();
			    	},function(){
			    		$(this).children('.img').find('.bg').fadeOut();
			    	})
				    $(".adelete-a").click(function(){
				    	$(this).parent().parent().parent('.subxc-list').remove();
				    });
				    //修改
				    $(".xc-xiugai-a").click(function(){	
						$(".layuiBg").css({
							display:"block",height:$(document).height()
						});
						$(".xcXgBox").css({
							left:($("body").width()-$(".xcXgBox").width())/2-20+"px",
							top:($(window).height()-$(".xcXgBox").height())/2+$(window).scrollTop()+"px",
							display:"block"
						});
					});
					
					$(".layerClose, .layuiBg ,.saveBtn").click(function(){
						$(".layuiBg ，.xcXgBox").fadeOut();
					});
				}
				reader.readAsDataURL(file);
			} else {
				$("#preview").html(html);
				if (html) {
					//删除方法
					$(".Thumb_delete").click(function() {
						ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
						return false;	
					});
					//提交按钮显示
					$("#fileSubmit").show();	
				} else {
					//提交按钮隐藏
					$("#fileSubmit").hide();	
				}
			}
		};
		funAppendImage();		
	},
	onDelete: function(file) {
		$("#uploadList_" + file.index).fadeOut();
	},
	onDragOver: function() {
		$(this).addClass("upload_drag_hover");
	},
	onDragLeave: function() {
		$(this).removeClass("upload_drag_hover");
	},
	onProgress: function(file, loaded, total) {
		var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
		eleProgress.show().html(percent);
	},
	onSuccess: function(file, response) {
		$("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
	},
	onFailure: function(file) {
		$("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");	
		$("#uploadImage_" + file.index).css("opacity", 0.2);
	},
	onComplete: function() {
		//提交按钮隐藏
		$("#fileSubmit").hide();
		//file控件value置空
		$("#fileImage").val("");
		$("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
	}
};
ZXXFILE = $.extend(ZXXFILE, params);
ZXXFILE.init();
</script>

</body></html>